<html>
<head>
    <title>Upload</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.element.js"></script>
    <script type="text/javascript" src="js/jquery.form.js"></script>
    <script type="text/javascript" src="js/jquery.lazy.min.js"></script>
    <script type="text/javascript" src="js/jquery.json-2.4.js"></script>
    <script type="text/javascript" src="js/bootstrap-modal.js"></script>
    <style type="text/css">
        #prePublishTime:before {
            content: '发布时间 : ';
        }

        #prePubAuthor:before {
            content: '作者 : ';
        }

        .modal-body > .txtCenter {
            text-align: center;
        }

        span h2 {
            text-align: center;
        }
    </style>
</head>
<body>
<div class="panel panel-info">
    <div class="panel-heading"><h2>内容上传</h2></div>
    <div class="panel-body">
        <div class="container">
            <div class="col-md-8">
                <div class="panel panel-primary ">
                    <div class="panel-heading">上传内容</div>
                    <div class="panel-body well">
                        <form class="form-horizontal" role="form" id="contentForm" enctype="multipart/form-data"
                              action="/upload" method="post">
                            <div class="form-group">
                                <label for="editTitle">标题</label>
                                <input name="editTitle" class="form-control" id="editTitle">
                            </div>
                            <div class="form-group">
                                <label for="author">作者</label>
                                <input name="author" class="form-control" id="author">
                            </div>
                            <div class="form-group">
                                <label for="publish">发布时间</label>
                                <input name="publish" class="form-control" id="publish">
                            </div>
                            <div class="form-group">
                                <label for="coverFile">封面</label>
                                <input type="file" name="coverFile" id="coverFile" class="form-control input-lg"/>
                                <label for="coverFileDesc">封面描述</label>
                                <input type="text" name="coverFileDesc" id="coverFileDesc" class="form-control"/>
                            </div>
                            <div class="form-group">
                                <label for="contentFile">正文</label>
                                <input type="file" name="contentFile" id="contentFile"
                                       class="form-control input-lg"/>
                            </div>
                            <div class="btn-group">
                                <button id="previewBtn" class="btn btn-info">
                                    <span class="glyphicon glyphicon-open"></span> Preview
                                </button>
                                <button class="btn  btn-warning" id="resetBtn">
                                    <span class="glyphicon glyphicon-remove"></span> Reset
                                </button>
                            </div>

                        </form>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="panel panel-info" style="width: 400px;">
                    <div class="panel-heading">
                        图片预上传
                        <div class="btn-group" style="float: right; display: block;margin-top: -5px;">
                            <button class="btn  btn-default" id="addImgBtn" type="button" name="submit">
                                <span class="glyphicon glyphicon-plus"></span> Add
                            </button>
                            <button class="btn  btn-link" id="removeAllBtn">
                                <span class="glyphicon glyphicon-remove"></span> Remove All
                            </button>
                        </div>
                    </div>
                    <div class="panel-body ">
                        <form id="imageForm" enctype="multipart/form-data" action="/upload" method="post">

                        </form>
                    </div>
                    <div class="panel-footer">

                        <button class="btn  btn-primary" id="imgSubmitBtn">
                            <span class="glyphicon glyphicon-ok"></span> Upload
                        </button>
                        <p class="help-block"> 点击添加按钮，预先将图片上传服务器。
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="preViewDialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">内容预览</h3>
            </div>
            <div class="modal-body">
                <span><h2 id="preTitle">标题</h2></span>
                <hr/>
                <p class="txtCenter">
                <span>
                    <small id="prePublishTime">2014-3-17</small>
                 </span>
                 <span>
                    <small id="prePubAuthor">ABC</small>
                </span>
                </p>
                <p id="preImgDiv" class="thumbnail txtCenter">
                    <img class="lazy img-thumbnail img-responsive" style="display: block;"
                         src="http://10.0.9.110:8001/image/01/upload/0314/0000000086.jpg"/>
                    <span><small>图片描述内容</small></span>
                </p>
                <div id="preContent">

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button class="btn  btn-primary" id="submitBtn">
                    <span class="glyphicon glyphicon-ok"></span> Submit
                </button>
                <form id="postContentToServer">
                    <input type="hidden" name="title" id="title"/>
                    <!--    <input type="hidden" name="pubAuthor" id="pubAuthor"/>
                        <input type="hidden" name="pubPublish" id="pubPublish"/>
                        <input type="hidden" name="pubCoverFileDesc" id="pubCoverFileDesc"/>
                        -->
                    <input type="hidden" name="preimage" id="preimage"/>
                    <input type="hidden" name="htmlUrl" id="htmlUrl"/>
                </form>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">

    $(document).ready(function () {
        var el = $.element, imageForm = $('#imageForm'), imgFile = 'pre_img_';
        $('#addImgBtn').click(function (e) {
                        index = imageForm.children().length + 1, btn = null;
                        if (index > 5) {
                            alert('To Much...');
                            return false;
                        }
                        addFileName = imgFile + index;
                        el.div({id: addFileName, className: 'form-group' },
                                el.label({  htmlFor: addFileName + '_file' },
                                        '图片 ' + index),
                                el.input({className: 'form-control', name: addFileName + '_file', id: addFileName + '_file', type: 'file'})
                        ).appendTo(imageForm);
                    });
            $('#removeAllBtn').click(function (e) {
                imageForm.children('div').remove();
            });

            $('#imgSubmitBtn').click(function (a) {
                $('#imageForm').ajaxSubmit({
                        requestJson: false,
                        url: 'http://10.0.9.110:8001/upload',
                        type: 'POST',
                        datatype:'json',
                        success: function (e, status, xhr) {
                            console.log(e);
                            response =e ;
                            if(typeof(e) == 'string')
                            {
                                response = $.evalJSON(e);
                            }
                            if (response.length>0) {
                                size = response.length, inputGroup = $('#ImageForm div.form-group');
                                if (inputGroup.length < size) {
                                    alert("Can't find the input element.")
                                }
                                $.each(response, function (i, data) {
                                    targetDiv = $(inputGroup[i]);
                                    $("div", targetDiv).remove();
                                    el.div({className: 'thumbnail' },
                                            el.img({ 'className': 'lazy img-thumbnail img-responsive'}).attr({'data-src': data.preUrl}),
                                            el.div({className: 'caption'},
                                                    el.h3(targetDiv.find('label').text()), el.p(data.url)
                                            )
                                    ).appendTo(targetDiv);
                                    $("label", targetDiv).remove();
                                    $("input", targetDiv).remove();
                                });
                                $("img.lazy").lazy({ bind: "event", delay: 2000 });
                            }
                        }
                    });
        });
        $('#previewBtn').click(function () {
            $('#preTitle').html($('#editTitle').val());
            $('#prePublishTime').html($('#publish').val());
            $('#prePubAuthor').html($('#author').val());

            $('#title').attr('value', $('#editTitle').val());
            //     $('#pubPublish').attr('value',$('#publish').val());
            //    $('#pubAuthor').attr('value',$('#author').val());


            var preImgDiv = $('#preImgDiv'), preContentDiv = $('#preContent');
            preImgDiv.html('<img src="css/loading.gif" />');
            preContentDiv.html('<img src="css/loading.gif" />');

            $('#contentForm').ajaxSubmit(function (e) {
                $.each(e, function (i, data) {
                    if (data.filedName == 'coverFile') {
                        preImgDiv.empty();
                        imgElments = [];
                        imgElments[0] = el.img({ 'className': 'lazy img-thumbnail img-responsive'}).attr({'data-src': data.url});
                        imgElments[1] = el.span(el.small($('#coverFileDesc').val()));
                        preImgDiv.append(imgElments);
                        $('#preimage').attr('value', data.url);
                        //     $('#pubCoverfileDesc').attr('value',$('#coverFileDesc').val());
                    } else if (data.filedName == 'contentFile') {
                        window.setTimeout(function () {
                            preContentDiv.load(data.url, function (response) {
                                $(this).empty();
                                $(this).append(response);
                            });
                        }, 2500);
                        $('#htmlUrl').attr('value', data.url);
                    }

                });
                $("img.lazy").lazy({ bind: "event", delay: 2000 });
            });
            $('#preViewDialog').modal('toggle');
            return false;
        });
        $('#resetBtn').click(function () {
            $('#contentForm').resetForm();
            $('#imageForm').resetForm();
            $('#imageForm > div ').remove();
            $('#postContentToServer').resetForm();
            return false;
        });
        $('#submitBtn').click(function () {
            $('#postContentToServer').ajaxSubmit({
                requestJson: false,
                url: 'http://10.0.9.110:41801/api/schoolexpress/title/$title',
                type: 'GET',
                success: function (e) {
                    alert('保存成功，当前ID为 ' + e);
                    $('#preViewDialog').modal('toggle');
                    $('#resetBtn').trigger('click');
                }});
            return false;
        });
    });
</script>
</body>
</html>
